import 'package:flutter/material.dart';
import 'package:fluttertoast/fluttertoast.dart';
import 'package:cached_network_image/cached_network_image.dart';

//使用`flutter/material.dart` 目的是使用Matrial风格的小控件
void main(){
  //运行程序
  runApp(MyApp());
}

//用无状态控件显示
class MyApp extends StatelessWidget{
  
  @override
  Widget build(BuildContext context){
    return MaterialApp(
      //标题
      title:'Widget_Demo',
      //主题色
      theme:ThemeData(
        //设置为蓝色
        primarySwatch: Colors.blue
      ),
      //这是一个Widget对象，用来定义当前应用打开的时候，所显示的界面
      // home:MyHomePage(),
        home: new TodosScreen(
        todos: new List.generate(20, (i) => new Todo(
          '我是表头$i项',
          '我是内容$i',
        )),
      ),
    );
  }
}

class MyHomePage extends StatelessWidget {
final List<Tab> myTabs = <Tab>[
    new Tab(text: 'Android'),
    new Tab(text: 'IOS'),
    new Tab(text: 'Flutter'),
    new Tab(text: 'RN'),
    new Tab(text: 'Java'),
    new Tab(text: 'C'),
    new Tab(text: 'C++'),
    new Tab(text: 'Go'),
  ];
   //底部数据
  final Map bottomMap ={
    "首页":Icon(Icons.home),
    "朋友圈":Icon(Icons.camera),
    "信息":Icon(Icons.message),
    "其他":Icon(Icons.devices_other),
  };
  int _index = 0;
  @override
  Widget build(BuildContext context) {
      return DefaultTabController(
        length: myTabs.length,
        child: new Scaffold(
          appBar: new AppBar(
            title: new Text('flutter'),
            bottom: new TabBar(
              indicatorColor: Colors.red, //指示器颜色 如果和标题栏颜色一样会白色
              tabs: myTabs,//绑定数据
              isScrollable: true, //是否可以滑动
            ),
          ),
          body: TabBarView(
            children: myTabs.map((Tab tab) {
            return new Center(child: new Text(tab.text));
          }).toList(),
          ),
        ),);
  }
}

// class MyHomePage extends StatelessWidget{
//   String image_url = "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1555610332586&di=390f49d00211b7bb07147c7be9b2ea43&imgtype=0&src=http%3A%2F%2Fpic31.nipic.com%2F20130804%2F7487939_090818211000_2.jpg";
//   final editController = TextEditingController();
//   @override
//   Widget build(BuildContext context){
//      return Scaffold(
//         //设置appbar
//       appBar: new AppBar(
//         //AppBar内容显示
//         title: new Text('This is a Demo'),
//         //前置图标
//         leading: new Icon(Icons.home),
//         //背景颜色 改为红色
//         backgroundColor: Colors.red,
//         //设置为标题内容居中
//         centerTitle: true,
//         //一个 Widget 列表，代表 Toolbar 中所显示的菜单，
//         // 对于常用的菜单，通常使用 IconButton 来表示；对于不常用的菜单通常使用 PopupMenuButton 来显示为三个点，点击后弹出二级菜单
//         actions: <Widget>[
//           //IconButton
//           new IconButton(
//             //图标
//             icon: new Icon(Icons.add_a_photo),
//             //提示
//             tooltip: 'Add photo',
//             //点击事件
//             onPressed: () {
//               //输出
//               print('text inputted: ${editController.text}');
//               //Toast
//               Fluttertoast.showToast(
//                   msg:'text inputted: ${editController.text}',
//                   toastLength: Toast.LENGTH_SHORT,
//                   gravity: ToastGravity.CENTER,
//                   timeInSecForIos: 1,
//               );
//             },
//           ),
//           //菜单弹出按钮
//           new PopupMenuButton<String>(
//             itemBuilder: (BuildContext context) {
//               return <PopupMenuItem<String>>[
//                 new PopupMenuItem<String>(
//                     value: "one", child: new Text('This one')),
//                 new PopupMenuItem<String>(
//                     value: "two", child: new Text('This two')),
//               ];
//             },
//             //选择点击事件
//             onSelected: (String action) {
//               switch (action) {
//                 case "one":
//                 //增加点击逻辑
//                   break;
//                 case "two":
//                 //增加点击逻辑
//                   break;
//               }
//             },
//           ),
//         ],
//       ),
//        //主体
//        body:new Center(
//          //在屏幕中央显示一个文本
//         //  child:new CustomTextStyle('jiangbin'),
//         // child: new RichWidget(),
//         // child: new ImageWidget(),
//         // child: new ColumnWidget(),
//         // child: new RowWidget(),
//         // child: new ListViewWidget(
//         //   new List<String>.generate(1000,(i){
//         //     return 'Item &i';
//         //   }),
//         child: new GridViewWidget(),
//       ),
//        ),
//        //左侧抽屉
//        drawer:Drawer(
//          //添加一个空的ListView
//          child:ListView(
//            //设置padding
//            padding:EdgeInsets.zero,
//            children: <Widget>[
//              //据说这里可以替换自定义的header
//              //userHeader,
//              ListTile(
//                //标题内容
//                title: Text("This is Item_one"),
//                //前置图标
//                leading: new CircleAvatar(child:new Icon(Icons.scanner),),
//              ),
//              ListTile(
//                //标题内容
//                title: Text("This is Item_two"),
//                //前置图标
//                leading: new CircleAvatar(child:new Icon(Icons.list),),
//              ),
//              ListTile(
//                //标题内容
//                title: Text("This is Item_three"),
//                //前置图标
//                leading: new CircleAvatar(child:new Icon(Icons.score),),
//              ),
//            ],
//          ),
//        ),
//      );
//   }
// }

//单独文本样式
class CustomTextStyle extends StatelessWidget{
  Paint pg = Paint();
  String text;
  //构造函数 参数外部传进来
  CustomTextStyle(this.text);
  @override
  Widget build(BuildContext context){
     //设置画笔颜色为黑色
    pg.color = Color(0xFF000000);
    return Text(
      text ?? "Hello",
      style: TextStyle(
          //颜色
          color: Colors.blue,
          //字体大小
          fontSize: 14,
          //字体加粗
          fontWeight: FontWeight.bold,
          //文本背景颜色
          background: pg),
    );
  }
}

class RichWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return RichText(
        text: TextSpan(
          text: 'This is RichText',
          style: new TextStyle(
            //false的时候不显示
              inherit: true,
              //字体大小
              fontSize: 16,
              //黑色
              color: Colors.black
          ),
          children: <TextSpan>[
            new TextSpan(
              text: 'Android艺术探索',
              style: new TextStyle(
                color: Colors.redAccent,
                //字体粗细
                fontWeight: FontWeight.bold,
              ),

            ),

            new TextSpan(text: '第一行代码'),
            new TextSpan(
              text: 'Android进阶之光',
              style: new TextStyle(
                color: Colors.indigo,
                //字体样式
                fontSize: 20,
              ),
            )
          ],
        )
    );
  }
}

//文本输入框
class TextFieldWidget extends StatelessWidget{

  final controller;
  //构造函数传值
  TextFieldWidget(this.controller);
  @override
  Widget build(BuildContext context){
      return TextField(
        controller: controller,
        //最大长度,右下角会显示一个输入数量的字符串
        maxLength: 26,
        //最大行数
        maxLines: 1,
        //是否自动更正
        autocorrect: true,
        //是否自动对焦
        autofocus: true,
        //设置密码 true：是密码 false：不是秘密
        obscureText: true,
        //文本对齐样式
        textAlign: TextAlign.center,
      );
  }
}

// //图片
// class ImageWidget extends StatelessWidget{
//     @override
//     Widget build(BuildContext context){
//       //项目资源图片 方式一
//       // return Image(
//       //   image: new AssetImage('images/1.png'),
//       // );
//       //项目资源图片 方式二
// //    return Image.asset('images/Image_fluttericon.jpeg');
//       return Image.asset('images/3.png');
//     }
// }

// //图片
// class ImageWidget extends StatelessWidget{
//     String image_url;
//     ImageWidget(this.image_url);
//     @override
//     Widget build(BuildContext context){
//         return Image.network(image_url);
//         // return Image.network(image_url);
//     }
// }

//图片
class ImageWidget extends StatelessWidget{

    String image_url;
    ImageWidget(this.image_url);
    @override
    Widget build(BuildContext context){
        return new CachedNetworkImage(
            imageUrl: image_url,
            //占位符
            placeholder: new CircularProgressIndicator(),
            //加载错误时显示的图片
            errorWidget: new Icon(Icons.error),
            //宽高
            width:1000,
            height: 600,
        );
    }
}

//按钮
class FlatButtonWidget extends StatelessWidget{

  @override
  Widget build(BuildContext context){
      return FlatButton(
        onPressed: (){
          Fluttertoast.showToast(
            msg:'你点击了FlatButton',
            toastLength: Toast.LENGTH_SHORT,
            gravity: ToastGravity.BOTTOM,
            timeInSecForIos: 1,
          );
        },
        child: Text('FlatButton'),
        color: Colors.blue,//按钮背景色
        textColor: Colors.white,//文字的颜色
        onHighlightChanged: (bool b){//水波纹变化回调

        },
        disabledColor: Colors.black,//按钮禁用时的显示的颜色
        disabledTextColor: Colors.black38,//按钮被禁用的时候文字显示的颜色
        splashColor: Colors.white,//水波纹的颜色
      );

  }
}

//Container布局
class ContainWidget extends StatelessWidget{

  @override
  Widget build(BuildContext context){
     return Container(
       child:Text("My name is Knight"),
       color: Colors.indigo,
       width:200,//宽
       height:200,//高
       margin:EdgeInsets.fromLTRB(5,5,5,5),//设置外边距
       padding:EdgeInsets.all(30),//内边距
     );
  }
}

//Padding布局
class PaddingWidget extends StatelessWidget{

  @override
  Widget build(BuildContext context){
    return Padding(
      //设置左上右下内边距为4，10，6，8
      padding:EdgeInsets.fromLTRB(4, 10, 6, 8),
      child: Text('My name is Knight'),
    );
  }
}

//Container嵌套Padding
class ContainPaddWidget extends StatelessWidget{
  @override
  Widget build(BuildContext context){
      return Container(
        width:200,//宽
        height:200,//高
        child: Padding(
          padding:EdgeInsets.fromLTRB(4, 10, 6, 8),
          child: Text("My name is Knight"),
        ),
        decoration: BoxDecoration(//设置边框
          //背景色
          color:Colors.redAccent,
          //圆角
          borderRadius: BorderRadius.circular(6),
        ),
      );
  }
}

//Center
class CenterWidget extends StatelessWidget{

  @override
  Widget build(BuildContext context){
    return Container(
      width:200,//宽
      height:200,//高
      child: Center(
        child: Text("My name is Knight"),
      ),
      decoration: BoxDecoration(//设置边框
        //背景色
        color:Colors.redAccent,
        //圆角
        borderRadius: BorderRadius.circular(6),
      ),
    );
  }
}

//层叠布局
class StackWidget extends StatelessWidget{

  @override
  Widget build(BuildContext context){
    return Stack(
      children: <Widget>[
          new Image.network('https://ws1.sinaimg.cn/large/0065oQSqgy1fze94uew3jj30qo10cdka.jpg',
            width:300.0,//宽
            height:300.0,//高
            ),
        new Opacity(
          opacity: 0.6,//不透明度
          child:new Container(
            width:100.0,
            height:100.0,
            color:Colors.redAccent,
          ),
        ),
        new Opacity(
          opacity: 0.6,
          child:new Container(
            width: 200.0,
            height:200.0,
            color:Colors.indigo,
          ),
        ),
      ],
    );
  }
}

//Column布局
class ColumnWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.start,
      crossAxisAlignment: CrossAxisAlignment.start,
      children: <Widget>[
        Container(
          color:Colors.blue,
          width: 50,
          height: 50,
        ),
        Container(
          color:Colors.black,
          width:50,
          height:50,
        ),
        Container(
          color:Colors.green,
          width:50,
          height:50,
        ),
      ],
    );
  }
}

// //Row
// class RowWidget extends StatelessWidget{
//   @override
//   Widget build(BuildContext context){
//     return Row(
//       mainAxisAlignment: MainAxisAlignment.spaceEvenly,
//       children: <Widget>[
//         Container(
//           color:Colors.blue,
//           width: 50.0,
//           height:50.0,
//         ),
//         Container(
//           color:Colors.black,
//           width:50.0,
//           height:50.0,
//         ),
//         Container(
//           color:Colors.green,
//           width:50.0,
//           height:50.0,
//         ),
//       ],
//     );
//   }
// }

// class RowWidget extends StatelessWidget{
//   @override
//   Widget build(BuildContext context){
//     return Row(
//         children: <Widget>[
//           new RaisedButton(
//               onPressed: (){

//               },
//               color:Colors.green,
//               child:new Text('绿色按钮1')
//           ),
//           new Expanded(
//             child:new RaisedButton(
//               onPressed: (){

//               },
//               color:Colors.yellow,
//               child:new Text('黄色按钮2')
//             ),
//           ),
//           new RaisedButton(
//               onPressed:(){

//               },
//               color:Colors.red,
//               child:new Text('黑色按钮3')),
//       ],
//     );
//   }
// }

class RowWidget extends StatelessWidget{
  @override
  Widget build(BuildContext context){
    return Row(
        children: <Widget>[
         Expanded(
         child:Container(
           color:Colors.green,
           padding:EdgeInsets.all(8),
           height: 40.0,
         ),
         flex:1,
       ),
       Expanded(
         child:Container(
           color:Colors.yellow,
           padding:EdgeInsets.all(8),
           height: 40.0,
         ),
         flex:2,
       ),
       Expanded(
         child:Container(
           color:Colors.red,
           padding:EdgeInsets.all(8),
           height: 40.0,
         ),
       ),
      ],
    );
  }
}

//ListView
class ListViewWidget extends StatelessWidget {
  final List<String> items;
  ListViewWidget(this.items);
  @override
  Widget build(BuildContext context) {
    return new ListView.builder(
      scrollDirection: Axis.horizontal,
      itemExtent: 110,
      itemCount: items.length,
      itemBuilder: (context, index) {
        return new ListTile(
          title: new Text('This is $index'),
        );
      },
    );
  }
}

//GridView                                           
class GridViewWidget extends StatelessWidget{        
                                                     
  @override                                          
  Widget build(BuildContext context){                
      return new GridView.count(                     
          crossAxisCount: 3, //3列                        
          children: List.generate(40,                
      (i){                                           
           return Card(                              
             child: Center(                          
               child:Text('This is $i'),             
             ),                                       
           );                                         
      })                                              
      );                                              
  }                                                  
}             

class FirstScreen extends StatelessWidget {
  
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: new AppBar(
        title: new Text('第一个页面'),
        backgroundColor: Colors.red,
      ),
      body: new Center(
        child: new RaisedButton(
          child: new Text('跳转'),
          onPressed: () {
            Navigator.push(
              context, 
              new MaterialPageRoute(builder: (context) => new SecondScreen()),
            );
          },
        ),
      ),
    );
  }
}

class SecondScreen extends StatelessWidget {
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('第二个页面'),
        backgroundColor: Colors.brown,
      ),
      body: new Center(
        child: new RaisedButton(
          onPressed: () {
            Navigator.pop(context);
          },
          child: new Text('返回'),
        ),
      ),
    );
  }
}

class TodosScreen extends StatelessWidget {
  final List<Todo> todos;

  TodosScreen({Key key, @required this.todos}) : super(key: key);
  
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('第一个页面'),
      ),
      body: new ListView.builder(
        itemCount: todos.length,
        itemBuilder: (context, index) {
          return new ListTile(
            title: new Text(todos[index].title),
            subtitle:new Text(todos[index].des) ,
            // When a user taps on the ListTile, navigate to the DetailScreen.
            // Notice that we're not only creating a new DetailScreen, we're
            // also passing the current todo through to it!
            onTap: () {
              Navigator.push(
                context,
                new MaterialPageRoute(
                  builder: (context) => new DetailScreen(todo: todos[index]),
                ),
              );
            },
          );
        },
      ),
    );
  }
}

class DetailScreen extends StatelessWidget {
  // Declare a field that holds the Todo
  final Todo todo;

  // In the constructor, require a Todo
  DetailScreen({Key key, @required this.todo}) : super(key: key);
  
  @override
  Widget build(BuildContext context) {
    // Use the Todo to create our UI
    return new Scaffold(
      appBar: new AppBar(
        title: new Text("${todo.title}"),
      ),
      body: new Padding(
        padding: new EdgeInsets.all(16.0),
        child: new Text('${todo.des}'),
      ),
    );
  }
}

class Todo {
  final String title;
  final String des;
  Todo(this.title,this.des);
}